import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';
import {
  HText,
  Divider,
  Navbar,
  ScrollableTabView,
  ScrollableTabViewTabBar,
  Button,
} from '../../DodLibrary/index';

class ScrollableTabViewPage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="ScrollableTabView"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />

        <ScrollableTabView
          tabBarPosition="bottom"
          renderTabBar={() => (
            <ScrollableTabViewTabBar.ScrollableTabBar {...{
              textStyle: { // the style of the text
                fontWeight: 'normal',
              },
              tabStyle: { // style of the each wrapper
                height: 36,
              },
              style: { // style of the wrapper
                height: 37,
              },
              underlineStyle: { // style of the underline
                height: 2,
                backgroundColor: '#108eeb',
              },
              tabBarActiveTextColorGradually: { // provide a rgb color to enable gradually changing color
                r: 16,
                g: 142,
                b: 235,
              },
              backgroundColor: '#fff',
            }} />
          )}
          tabBarActiveTextColor="#108eeb"
          prerenderingSiblingsNumber={1}>
          <View
            tabLabel="Inuyasha"
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Button.Ripple
              onPress={() => navigation.navigate('ScrollableFullTabViewPage')}>
              ScrollableFullTabView
            </Button.Ripple>
          </View>
          <View
            tabLabel="Kaggome"
            style={{ flex: 1 }}>
            <ScrollView>
              <View
                style={{
                  justifyContent: 'space-around',
                  alignItems: 'center',
                }}>
                <Button.Opacity radius={0}>
                  One
                </Button.Opacity>
                <Button.Opacity radius={0}>
                  Two
                </Button.Opacity>
              </View>
            </ScrollView>
          </View>
          <View tabLabel="Kikyou">
            <Text>three</Text>
          </View>
          <View tabLabel="Sesshoumaru">
            <Text>four</Text>
          </View>
          <View tabLabel="one1">
            <Text>1one</Text>
          </View>
          <View tabLabel="two1">
            <Text>tw1o</Text>
          </View>
          <View tabLabel="three1">
            <Text>thr1ee</Text>
          </View>
          <View tabLabel="four1">
            <Text>fou1r</Text>
          </View>
        </ScrollableTabView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ScrollableTabViewPage;
